<template>
  <div class="content-r">
        <div class="user-info" v-if="token">
          <div class="info-t">
            <router-link to="javascript:;">
              <img :src="userInfo.avatar">
            </router-link>
            <div class="info-t-r">
              <div class="info-t-r-t">
                <router-link to="/user/homePage">{{ userInfo.name }}</router-link>
                <span></span>
              </div>
              <p><router-link to="javascript:;">8<i></i></router-link></p>
              <router-link to="javascript:;"><i>签到</i></router-link>
            </div>
          </div>
          <div class="info-b">
            <div class="info-b-item" @click="to('/user/event')">
              <p class="num">{{ userInfo.evens }}</p>
              <p class="title">动态</p>
            </div>
            <div class="info-b-item" @click="to('/user/follows')">
              <p class="num">{{ userInfo.follows }}</p>
              <p class="title">关注</p>
            </div>
            <div class="info-b-item" @click="to('/user/fans')">
              <p class="num">{{ userInfo.fans }}</p>
              <p class="title">粉丝</p>
            </div>
          </div>
        </div>
      </div>
</template>

<script>
export default {
  methods: {
    to(path) {
      this.$router.push({
        path: `${path}/${this.userInfo.id}`
      })
    }
  },
  computed: {
    userInfo() {
      return this.$store.state.user.userInfo
    },
    token() {
      return this.$store.state.user.token
    }
  }
}
</script>

<style lang="less" scoped>

      .content-r {
        width: 254px;
        border-right: 1px solid #D3D3D3;
        box-sizing: border-box;
        .user-info {
          padding: 20px 0 10px;
          background-color: #F7F7F7;
          .info-t {
            display: flex;
            justify-content: space-evenly;
            &>a {
              width: 80px;
              height: 80px;
              padding: 2px;
              border: 1px solid #DADADA;
              img {
                width: 80px;
                height: 80px;
              }
            }
            .info-t-r {
              .info-t-r-t {
                a {
                  display: inline-block;
                  max-width: 60px !important;
                  font-size: 14px !important;
                  color: #333 !important;
                  font-weight: bold;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  word-wrap: normal;
                  font-size: 14px;
                }
                span {
                  display: inline-block;
                  margin-left: 5px;
                  width: 43px;
                  height: 16px;
                  background-size: 100% 15px;
                  background-repeat: no-repeat;
                  background-position: center;
                  background-image: url(../../assets/images/no-vip.png);
                }
              }
              p {
                margin-top: 5px;
                a {
                  display: inline-block;
                  height: 17px;
                  overflow: hidden;
                  padding-left: 25px;
                  line-height: 18px;
                  color: #999;
                  font-weight: bold;
                  font-style: italic;
                  background: url(../../assets/images/icon2.png) no-repeat -130px -64px;
                  i {
                    float: right;
                    width: 8px;
                    height: 17px;
                    background: url(../../assets/images/icon2.png) no-repeat -192px -64px;
                  }
                  &:hover {
                    color: #999 !important;
                    text-decoration: none !important;
                  }
                }
              }
              &>a {
                display: block;
                margin-top: 5px;
                padding-right: 5px;
                width: 95px;
                height: 31px;
                line-height: 31px;
                text-align: center;
                color: #fff;
                background: url(../../assets/images/button2.png) no-repeat right -428px;
                i {
                  display: block;
                  padding: 0 15px 0 20px;
                  width: 60px;
                  height: 31px;
                  background: url(../../assets/images/button2.png) no-repeat 0 -387px;
                }
              }
            }
          }
          .info-b {
            margin-top: 20px;
            display: flex;
            justify-content: space-around;
            .info-b-item {
              flex: 1;
              border-right: 1px solid #E4E4E4;
              cursor: pointer;
              p {
                text-align: center;
                color: #666;
              }
              .num {
                font-size: 20px;
              }
              &:hover>p {
                color: #0c73c2 !important;
                text-decoration: none !important;
              }
              &:last-child {
                border: none !important;
              }
            }
          }
        }
      }
</style>